import { EventBus } from '@/store/index'
import { H5_TYPE } from '@/common/const-dif'
import { INJECT_IN_GROUPS } from '@/common/const-wb'
import { PAGE_TYPE } from '@/common/const'
import { Toast } from 'vant'
import { postStatics } from '@/service/statics'
import { getMousePos, isHasOwnProperty, getCompIdByParam } from '@/plugins/utils'
import store from '@/store'
import { getMainWbDataEventByEvents } from '@/store/utils'
import { COMPONENT_TYPES } from '@/common/const-wb'
import { nextTick } from 'vue'

export default class BaseGroup {
  constructor() {
    this.item;
    this.commonAttr;
    this.components;
    this.store = store;
  }

  get componentMap() {
    return this.store.state.componentMap;
  }
  get controls() {
    return this.store.state.controls ? this.store.state.controls : this.store.state.wbComponents.controls;
  }
  get allPages() {
    return this.store.state.allPages ? this.store.state.allPages : this.store.state.components.controls;
  }
  get wbUserData() {
    return this.store.state.userInfo.wbUserData;
  }
  get userInfo() {
    return this.store.state.userInfo;
  }
  get interactionData() {
    return this.store.state.interactionData;
  }
  get frontData() {
    return this.store.state.frontData;
  }
  get formValues() {
    return this.store.state.formValues;
  }
  get globalIsPost() {
    return this.store.state.globalIsPost;
  }
  get pages() {
    return this.store.state.pages;
  }
  get pops() {
    return this.store.state.pops_;
  }
  get statePopId() {
    return this.store.state.popId;
  }
  get pageIndex() {
    return this.store.state.pageIndex;
  }
  get siteAttrs() {
    return this.store.state.attrs;
  }

  get timeObj() {
    return this.store.state.timeObj;
  }

  get appid() {
    return this.store.state.attrs.wb_appkey;
  }
  get uid() {
    return this.store.state.userInfo.uid;
  }
  get siteInfo() {
    return this.store.state.siteInfo;
  }

  init(item){
    this.item = item;
    this.commonAttr = item.commonAttr;
    this.itemIndex = this.commonAttr.itemIndex;
    this.components = item.components;

    let length = 0;
    _.forEach(this.components, (compData) => {
      if(INJECT_IN_GROUPS.indexOf(compData.cid) != -1) {
        if(compData.cid == COMPONENT_TYPES.wb_bg) {
          if(!compData.commonAttr.isBlank) {
            length++;
          }
        } else {
          length++;
        }
      }
    })

    this.setIntervalCb = window.setInterval(() => {
      let count = 0;
      _.forEach(this.components, (compData) => {
        if(compData.vueContainer){
          count++;
        }
      })
      if(count != 0 && count >= length){
        window.clearInterval(this.setIntervalCb);
        this.start();
      }
    }, this.siteInfo.reloadTime);
  }
  //子类中覆盖
  start(){}

  initFilterComponents(cid){
    this.filterComponents = [];
    _.forEach(this.components, (compData) => {
      if(compData.cid == cid){
        this.filterComponents.push(compData);
      }
    })
  }

  get wbData(){
    const relateAttrCompId = getCompIdByParam(this.commonAttr.relateAttrCompId);
    let controlData;
    if(relateAttrCompId){
      const relateCompData = this.componentMap[relateAttrCompId];
      const relateMainEvent = getMainWbDataEventByEvents(relateCompData.events);
      controlData = this.controls[relateAttrCompId] && this.controls[relateAttrCompId][relateMainEvent.controlId];
      if(controlData){
        if(!isHasOwnProperty(controlData.data, "elements")){
          this.wbData_ = controlData.data
        }
      }
    }else{
      let event = getMainWbDataEventByEvents(this.item.events)
      if(event && this.getItemControls){
        controlData = this.getItemControls[event.controlId]
        if(controlData){
          if(!isHasOwnProperty(controlData.data, "elements")){
            this.wbData_ = controlData.data
          }
        }
      }else{
        this.wbData_ = null
      }
    }
    return this.wbData_
  }

  getItemControls(){
    return this.controls[this.item.id];
  }

  showToast(msg) {
    if(_.trim(msg)){
      Toast(msg);
    }
  }

  showPop(popId) {
    if(!this.pops[popId-1]){
      return
    }
    if (this.statePopId > 0 && this.statePopId != popId) {
      EventBus.$emit('closePop')
    }
    this.store.commit('updatePopId', { popId })
    EventBus.$emit("showPop", { popId })
  }

  showPage(pageId) {
    if(!this.pages[pageId-1]){
      return
    }
    if (this.statePopId > 0) {
      EventBus.$emit('closePop')
    }

    EventBus.$emit("isStartHtml2canvas", { isStart: true, compId: this.item.id});
    let pageIndex = pageId - 1
    this.store.commit('updatePageIndex', { pageIndex })

    EventBus.$emit('pauseVideo', { pageId })
    EventBus.$emit('playOrPauseAudio', { isPlay: false })
    if (this.siteAttrs.h5Type == H5_TYPE.mobile && !this.siteAttrs.isNoSwiping && this.siteAttrs.pageType == PAGE_TYPE.single) {
      EventBus.$emit("swiper", { pageId })
    } else {
      EventBus.$emit('showPage', { pageId })
    }
    nextTick(() => {
      EventBus.$emit("isStartHtml2canvas", { isStart: false, compId: this.item.id});
    })
  }

  onPostStatics(e, { comType, wModule, jumpUrl, params, apiUri }) {
    if (this.isH5Edit) {
      return
    }
    let xy = getMousePos(e)
    let comId
    if (this.item) {
      comId = this.item.id
    }
    postStatics(this.store.state, {
      comType, comId, wModule, pageIndex: "group-component", apiType: "",
      apiUri: apiUri ? apiUri : "", params: params ? params : "", jumpUrl, clickSequence: "", mouseX: xy.x, mouseY: xy.y
    })
  }

  // 动态加载css脚本
  loadStyleString(cssText) {
    var style = document.createElement("style");
    style.type = "text/css";
    try{
        // firefox、safari、chrome和Opera
        style.appendChild(document.createTextNode(cssText));
    }catch(ex) {
        // IE早期的浏览器 ,需要使用style元素的stylesheet属性的cssText属性
        style.styleSheet.cssText = cssText;
    }
    document.getElementsByTagName("head")[0].appendChild(style);
  }

  destroy(){
    this.item.vueContainer = null;
    this.filterComponents = null;
  }
}